<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>

    <div id="aaaa">
     <span>欢迎您，
        <template v-once>{{username}}</template>
     </span>
        <span v-html="html"></span>
        <template v-if="age == 18">
            可以找对象了
        </template>
        <template v-else-if="age > 18">
            老光棍
        </template>
        <template v-else>
            太小了
        </template>

        <table>
            <tr v-for="(stu,i) in stus">
                <td>{{i}} , {{stu.name}}</td>
                <td>{{stu.age}}</td>
            </tr>
        </table>


        <span v-bind:style="mystyle">span</span>
        <br>
        <input v-model="hobby">
        <input v-model="sex" :value="id" type="checkbox">

        <span @click="doclick">点击</span>
    </div>
    <script>

        var data = {
            username:"liuxing",
            html:"<a href='www.baidu.com'>百度</a>",
            age:17,
            stus:[
                {name:'lx',age:32},
                {name:'lijie',age:20},
                {name:'xiaoxing',age:70}
            ],
            mystyle:"background: yellow",
            hobby:"",
            sex:true,
            id:1
        };
        //数据模型
        var vm = new Vue({


            el: "#aaaa",  // element;
            data:data,
            methods:{
                doclick:function(){
                    this.age=20;
                    this.stus = [
                        {name:'lxx',age:32},
                        {name:'lijie2',age:20},
                        {name:'xiaoxingg',age:70}
                    ]
                    this.stus.push({
                        name:'xxxx',
                        age:90
                    })
                }
            }
//            created :function(){
//                this.username="lisi"
//            }
//            ,
//            beforeMount:function(){
//
//            },
//            mounted:function(){
//
//            }
        });

    </script>
</body>
</html>